// 创建一个类组件，替换原来的App.js（之前的是函数组件）
import React from 'react'
import './App.css';

// 函数组件和类组件的区别：1.比较熟悉function，不熟悉class，但是class功能更强大；2.class可以有this；3.class有生命周期钩子，函数组件没有；4.state的处理。函数组件适用于简单的静态页面展示。

// 声明一个类组件，暴露出来
export default class App extends React.Component {
  constructor(){
    // 调用super之后，才可以使用this
    super();
    // state：状态机。管理数据状态，可以初始化数据，类似vue中的data
    this.state = {
      age: 18,
      val: ''
    }
  }
  showNum1(val1, val2, e) {
    console.log(this);
    console.log(val1);
    console.log(val2);
    console.log(e);
  }
  showNum2(val1, val2, e) {
    // this指向当前组件
    console.log(this);
    console.log(val1);
    console.log(val2);
    console.log(e);
  }
  showBig(e) {
    console.log('Big',e);
  }
  showSmall(e) {
    console.log('small',e);
    // 阻止冒泡,使用原生js的方法即可，不能return false
    e.stopPropagation();
  }
  // 右键显示菜单
  showMenu(e) {
    console.log(111);
    // 阻止默认事件
    e.preventDefault();
  }
  changeAge() {
    // 想要修改state中的数据，需要使用setState方法,异步的方法。
    // 第一个参数是要修改的数据和结果；第二个参数是回调函数，在数据更新完成后执行
    this.setState({
      age: 20
    }, ()=>{
      console.log('我是新的数据：',this.state);
    });
    // 在setState方法外面打印，都是先执行log后修改数据
    console.log('我是老的数据：',this.state);
  }
  changeVal(e) {
    // console.log(e.target.value);
    this.setState({
      val: e.target.value
    })
  }
  // render方法必须要有，而且一定要返回一个节点
  render() {
    return (<div>
      <p>我是一个类组件</p>
      {/* ES5的绑定事件的方法 */}
      {/* 传递事件对象是隐式的 */}
      <button onClick={this.showNum1.bind(this, 'hello',[1,2,3])}>打印666</button>
      {/* ES6的绑定事件的方法 */}
      {/* 传递事件对象是显式的 */}
      <button onClick={(e)=>this.showNum2('hi~', {name:'Tom'}, e)}>打印666</button>
      {/* onClickCapture或者onChangeCapture，在事件后面加上Capture，事件流会从冒泡变成捕获 */}
      <div className="big" onClick={(e) => this.showBig(e)} onContextMenu={this.showMenu.bind(this)}>
        <div className="small" onClick={(e) => this.showSmall(e)}></div>
      </div>
      <p onClick={this.changeAge.bind(this)}>{this.state.age}</p>
      {/* onChange是视图的变化驱动数据的更新；value={this.state.val}是数据的变化驱动视图更新 */}
      {/* <input :value="this.state.val" @change="changeVal($event)"></input>将vue的思路改造成react的语法 */}
      <input value={this.state.val} onChange={(e)=>this.changeVal(e)}></input>
      <p>{this.state.val}</p>
    </div>)
  }
}